<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <link rel="stylesheet" href="/admin/js-css/css/listvue.css"  media="all" >

</head>
<body>
<div id="app"  >
    <!-- 查询表单 -->
    <div id="topdiv" ref="appdiv" >
        <div class="demoTable" style="padding: 5px;"   >
            <el-form :inline="true" size="mini"   ref="listSearch"   >
                <el-form-item  label="表名" >
                    <el-input v-model="form.tableName" style="width:180px"  clearable ></el-input>
                </el-form-item>

                <el-form-item  label="查询SQL" >
                    <el-input v-model="form.sql" style="width:400px" @focus="setInputSql"  clearable ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="toQuery">查询</el-button>
                    <el-button type="primary" @click="saveData">保存</el-button>
                    <el-button type="primary" @click="f_exp">导出数据</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 分割线-->
        <el-divider   style="margin: 3px 0;" ></el-divider>

    </div>

    <div>
        <template>
            <el-table
                    :data="tableData"
                    border
                    ref="tipsTable"
                    size="mini"
                    :height="800"
                    @sort-change="sortChange"
                    style="width: 100%">
                <el-table-column
                        v-for="(item,index) in headData"
                        :prop="item.column_name"
                        :label="item.column_name"
                        sortable="custom"
                        width="180">

                    <template  slot-scope="scope" >
                        <!--列表输入框进行编辑-->
                        <template v-if="scope.row['rw'] < 2" >
                            <el-input  size="mini" v-model="scope.row[item.column_name]"  ></el-input>
                        </template>

                        <template v-if="scope.row['rw'] >= 2" >
                            {{scope.row[item.column_name]}}
                        </template>
                    </template>


                </el-table-column>

            </el-table>
        </template>
    </div>
</div>
</body>
<script>


    var vm = new Vue({
        el:"#app",
        data:{
            form:{sql:""},
            headData:[],
            tableData: [],
            oldMapobj:{},
            order:"",
        },
        created(){
        },
        methods:{
            setInputSql(e){
                if(this.form.sql == "" || this.form.sql == undefined){
                    this.form.sql = "select * from "+this.form.tableName+" where 1=1 ";
                }
            },
            async saveData(){
                let map0 = this.tableData[0];
                let map1 = this.tableData[1];
                let map2 = this.oldMapobj;
                let td = [map0,map1,map2];
                console.log("td",td);
                let index = load();
                const res = await postWebCustom(getTableId("2490"),{jsondata:JSON.stringify(td),bm:this.form.tableName})
                layer.close(index);
                if(res.code == 0){
                    top.error(res.msg);
                }else {
                    top.alert(res.msg);
                }

            },
            async toQuery(){
                this.order = "";
                const res = await postWebCustom(getTableId("2488"),{tableName:this.form.tableName});
                this.headData = res.data;
                this.getTableData();
            },
            async getTableData(){
                let index = load();
                const res1 = await postWebCustom(getTableId("2489"),{pageNo:"1",pageSize:"50",sql:this.form.sql,tableName:this.form.tableName,order:this.order});
                this.tableData = res1.data.rows;
                copy(res1.data.rows[1],this.oldMapobj);
                layer.close(index);
            },
            //自定义排序
            sortChange(column){
                this.order = column.prop;
                this.getTableData();
            },
            async f_exp(){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };

                const res = await postWebCustom(getTableId("2492"),{bm:this.form.tableName,sql:this.form.sql});
                top.alert(res.msg);
                top.f_layer_open_get("/admin/html/dataManagement/expexcel-getpro.html", "60%", "25%", function () {

                }, btn, "数据导出")
            },
        }
    });
</script>
</html>